<template>
	<view>
		<div class="datree-box">
			<div class="datree-box-item">
				<MyTree 
					defaultExpandAll 
					:data="roomTreeData" 
					:field="{label: 'name',key: 'id'}" 
					checkboxPlacement="right" 
					@change="handleTreeChange" 
				/>
			</div>
		</div>
	</view>
</template>

<script>
	/**
	 * 模拟创建一个接口数据
	 */
	function GetApiData(currentNode) {
		const {
			key
		} = currentNode
		return new Promise((resolve) => {
			setTimeout(() => {
				// 模拟返回空数据
				if (key.indexOf('-') > -1) {
					// return resolve(null)
					return resolve([])
				}
				return resolve([{
						'id': `${key}-1`,
						'name': `动态数据X${key}-1`,
						'append': 'children为空数组，仍有展开图标',
						'children': [],
					},
					{
						'id': `${key}-2`,
						'name': `动态数据X${key}-2`,
						'append': '无children字段，无展开图标',
						// 'children': [],
					},
					{
						'id': `${key}-3`,
						'name': `动态数据X${key}-3`,
						'append': 'children字段为null或undefined，无展开图标',
						'children': null,
					},
				])
			}, 2000)
		})
	}
	import MyTree from '@/components/my-tree/index.vue'
	export default {
		components: {
			MyTree
		},
		data() {
			return {
				GetApiData,
				roomTreeData: [{
						'id': '2',
						'name': '行政中心',
						'children': [{
								'id': '21',
								'name': '行政部',
							},
							{
								'id': '22',
								'name': '财务部',
							},
							{
								'id': '23',
								'name': '人力资源部'
							},
						],
					},
					{
						'id': '3',
						'name': '技术中心',
						'children': [{
								'id': '31',
								'name': '研发部'
							},
							{
								'id': '32',
								'name': '设计部',
							},
							{
								'id': '33',
								'name': '测试部',
							},
						],
					},
					{
						'id': '4',
						'name': '运营中心',
					},
					{
						'id': '5',
						'name': '营销中心',
					}
				],
			}
		},
		methods: {
			handleTreeChange(allSelectedKeys, currentItem) {
				console.log('handleTreeChange9 ==>', allSelectedKeys, currentItem)
			}
		},
	}
</script>

<style lang="scss">
	.datree-box {
		display: flex;
		flex-wrap: wrap;
		&-item {
			width: 100%;
		}

		&-test {
			display: flex;
			align-items: center;
			padding: 0 20px;
			margin-bottom: 10px;
			font-size: 12px;

			>button,
			>uni-button {
				display: inline-block;
				width: auto;
				height: auto;
				padding: 5px 10px;
				margin-left: 10px;
				font-size: 12px;
				line-height: 1;
				color: #fff;
				background: $uni-color-primary;

				&::after {
					display: none;
				}
			}
		}
	}
</style>